<template>
  <div class="app-container">
    <h2 style="text-align: center">最终发布</h2>

    <el-steps :active="3" finish-status="success" align-center>
      <el-step title="添加课程的基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>

    <el-card style="margin-top: 15px">
      <!--显示课程信息，确认课程信息-->
      <el-form ref="form" :model="publishCourse" label-width="100px">
        <el-form-item label="课程名称">
          <el-input v-model="publishCourse.title" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="课程价格">
          <el-input-number v-model="publishCourse.price" :disabled="true"></el-input-number>
        </el-form-item>
        <el-form-item label="课时数量">
          <el-input-number v-model="publishCourse.lessonNum" :disabled="true"></el-input-number>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-input v-model="publishCourse.oneSubject" :disabled="true" style="width: 150px"></el-input>
          <el-input v-model="publishCourse.twoSubject" :disabled="true" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="课程讲师">
          <el-input v-model="publishCourse.teacherName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="课程封面">
          <img :src="publishCourse.cover" style="height: 200px">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="prev" icon="el-icon-edit">返回修改</el-button>
          <el-button type="primary" @click="next" icon="el-icon-success">最终发布</el-button>
        </el-form-item>
      </el-form>

    </el-card>


  </div>
</template>

<script>
  import CourseApi from '@/api/edu/course';

  export default {
    name: 'publish',
    data(){
      return{
        courseId: '',
        //课程确认信息
        publishCourse: {},
      }
    },
    created() {
      //获取路由中的参数
      if (this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.getCourseInfo();
      }

    },
    methods: {
      //点击发布发布课程并且进行路由的跳转
      async next(){
        const result = await this.$confirm('确认发布课程信息嘛','提示',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'info'
        }).catch(e => e);
        if (result === 'cancel') return this.$message.info('取消发布');
        await CourseApi.getPublishCourseInfo(this.courseId);
        this.$message.success('课程发布成功')
        this.$router.push('/course/list');
      },

      //返回编辑
      prev(){
        this.$router.push(`/course/chapter/${this.courseId}`);
      },

      //根据Id查询课程确认西悉尼
      async getCourseInfo(){
        const {data} = await CourseApi.getPublishCourseInfo(this.courseId);
        this.publishCourse = data.data;
      },


    }
  }
</script>

<style scoped>

</style>
